import 'package:flutter/material.dart';
import 'package:metaera_flutter/utils/Device.dart';
import 'package:metaera_flutter/utils/Font.dart';
import 'package:metaera_flutter/utils/Color.dart';
import '../../widgets/Toasts.dart';
import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';

class ArticleContentView extends StatelessWidget {
  final String content;
  const ArticleContentView({super.key, required this.content});

  // 处理HTML内容
  String _formatHtmlContent(String htmlContent) {
    String processedContent = htmlContent;

    // 确保内容被p标签包裹（如果需要）
    if (!processedContent.contains("<p>") && processedContent.isNotEmpty) {
      processedContent = "<p>$processedContent</p>";
    }

    // 处理特殊字符和替换
    processedContent = processedContent.replaceAll('><br></p>', '></p>');
    processedContent = processedContent.replaceAll('rgb(0, 0, 0)', '#333333');

    return processedContent;
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: DeviceUtils.width16),
      child: HtmlWidget(
        _formatHtmlContent(content),
        customStylesBuilder: (element) {
          // 定义字体大小并向上取整
          double fontSize14 = DeviceUtils.adaptiveSizeByScreenUtil(
            14,
          ).ceilToDouble();
          double fontSize16 = DeviceUtils.adaptiveSizeByScreenUtil(
            16,
          ).ceilToDouble();
          double fontSize18 = DeviceUtils.adaptiveSizeByScreenUtil(
            18,
          ).ceilToDouble();
          double fontSize22 = DeviceUtils.adaptiveSizeByScreenUtil(
            22,
          ).ceilToDouble();
          double fontSize28 = DeviceUtils.adaptiveSizeByScreenUtil(
            28,
          ).ceilToDouble();

          switch (element.localName) {
            // 全局样式
            case 'body':
              return {
                'margin': '0',
                'padding': '0',
                'font-family':
                    '-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif',
                'font-size': '${fontSize16}px',
                'color': '#333333',
                'line-height': '1.6',
              };

            // 标题样式（移除背景渐变，因为会在customWidgetBuilder中处理）
            case 'h1':
              return {
                'font-size': '${fontSize28}px',
                'font-weight': 'bold',
                'color': '#ffffff',
                'text-align': 'start',
                'line-height': '1.5',
                'margin-top': '20px',
                'margin-bottom': '5px',
                'padding-top': '10px',
                'padding-bottom': '10px',
                'padding-left': '16px',
                'padding-right': '16px',
                'border-radius': '4px',
                'display': 'block',
              };

            case 'h2':
              return {
                'font-size': '${fontSize22}px',
                'font-weight': 'bold',
                'color': '#ffffff',
                'text-align': 'start',
                'line-height': '1.5',
                'margin-top': '30px',
                'margin-bottom': '5px',
                'padding-top': '10px',
                'padding-bottom': '10px',
                'padding-left': '16px',
                'padding-right': '16px',
                'border-radius': '4px',
                'display': 'block',
              };

            case 'h3':
              return {
                'font-size': '${fontSize18}px',
                'font-weight': 'bold',
                'color': '#ffffff',
                'text-align': 'start',
                'line-height': '1.5',
                'margin-top': '25px',
                'margin-bottom': '5px',
                'padding-top': '10px',
                'padding-bottom': '10px',
                'padding-left': '16px',
                'padding-right': '16px',
                'border-radius': '4px',
                'display': 'block',
              };

            // 段落样式
            case 'p':
              return {
                'font-size': '${fontSize16}px',
                'font-weight': '400',
                'line-height': '1.6',
                'text-align': 'left',
                'color': '#333333',
                'margin-top': '20px',
                'margin-bottom': '16px',
              };

            // 链接样式
            case 'a':
              return {'text-decoration': 'underline', 'color': '#0066cc'};

            // 图片样式
            case 'img':
              return {
                'margin-top': '10px',
                'margin-bottom': '10px',
                'max-width': '100%',
                'height': 'auto',
                'display': 'block',
              };

            // 引用块样式
            case 'blockquote':
              return {
                'background': '#f7f7f7',
                'font-family':
                    '"PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif',
                'font-size': '${fontSize16}px',
                'font-weight': '600',
                'line-height': '1.6',
                'letter-spacing': '0em',
                'border-left': '6px solid #cccccc',
                'padding': '20px',
                'margin': '20px 0',
                'color': '#000000',
                'text-align': 'left',
              };

            // 列表样式
            case 'ul':
            case 'ol':
              return {'padding-left': '1.5em', 'margin': '16px 0'};

            case 'li':
              return {
                'font-size': '${fontSize16}px',
                'margin-left': '0px',
                'font-weight': '400',
                'text-align': 'justify',
                'margin-top': '5px',
                'color': '#333333',
                'line-height': '1.6',
              };

            // 粗体样式
            case 'strong':
            case 'b':
              return {
                'font-size': '${fontSize16}px',
                'font-weight': '600',
                'line-height': '1.6',
                'text-align': 'left',
                'color': '#333333',
              };

            // 斜体样式
            case 'em':
            case 'i':
              return {'font-style': 'italic'};

            // 其他标题
            case 'h4':
              return {
                'font-size': '${fontSize16}px',
                'font-weight': '600',
                'color': '#333333',
                'margin': '16px 0 8px 0',
              };

            case 'h5':
              return {
                'font-size': '${fontSize14}px',
                'font-weight': '600',
                'color': '#333333',
                'margin': '16px 0 8px 0',
              };

            case 'h6':
              return {
                'font-size': '${fontSize14}px',
                'font-weight': '400',
                'color': '#333333',
                'margin': '16px 0 8px 0',
              };

            // 隐藏特定类
            default:
              if (element.classes.contains('viewer-title')) {
                return {'display': 'none'};
              }
              if (element.classes.contains('ql-align-center')) {
                return {'text-align': 'center'};
              }
              return null;
          }
        },
        customWidgetBuilder: (element) {
          // 为标题元素创建带有渐变背景的自定义Widget
          if (element.localName == 'h1' ||
              element.localName == 'h2' ||
              element.localName == 'h3') {
            // 定义字体大小
            double fontSize18 = DeviceUtils.adaptiveSizeByScreenUtil(
              18,
            ).ceilToDouble();
            double fontSize22 = DeviceUtils.adaptiveSizeByScreenUtil(
              22,
            ).ceilToDouble();
            double fontSize28 = DeviceUtils.adaptiveSizeByScreenUtil(
              28,
            ).ceilToDouble();

            // 获取标题文本内容
            String text = element.text;

            // 根据标题级别设置字体大小和内边距
            double fontSize;
            double paddingTop = 10.0;
            double paddingBottom = 10.0;
            double paddingLeft = 16.0;
            double paddingRight = 16.0;
            double marginTop = 25.0;
            double marginBottom = 5.0;

            switch (element.localName) {
              case 'h1':
                fontSize = fontSize28;
                marginTop = 20.0;
                break;
              case 'h2':
                fontSize = fontSize22;
                marginTop = 20.0;
                break;
              case 'h3':
                fontSize = fontSize18;
                marginTop = 20.0;
                break;
              default:
                fontSize = fontSize18;
            }

            return Container(
              width: double.infinity, // 设置宽度为无穷大，确保占据整行
              margin: EdgeInsets.only(top: marginTop, bottom: marginBottom),
              padding: EdgeInsets.only(
                top: paddingTop,
                bottom: paddingBottom,
                left: paddingLeft,
                right: paddingRight,
              ),
              decoration: BoxDecoration(
                // 使用Flutter的渐变背景替代CSS的linear-gradient
                gradient: LinearGradient(
                  colors: [
                    Color(0xFF9945FF),
                    Color(0xFF8752F3),
                    Color(0xFF5497D5),
                    Color(0xFF43B4CA),
                    Color(0xFF28E0B9),
                    Color(0xFF19FB9B),
                  ],
                  stops: [0.0, 0.24, 0.46, 0.56, 0.69, 0.96],
                ),
                borderRadius: BorderRadius.circular(4.0),
              ),
              child: Text(
                text,
                style: TextStyle(
                  fontSize: fontSize,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                  height: 1.5,
                ),
              ),
            );
          }

          // 隐藏viewer-title类的元素
          if (element.classes.contains('viewer-title')) {
            return SizedBox.shrink();
          }

          return null;
        },
        onTapUrl: (url) {
          // 处理链接点击事件
          if (url != null) {
            Toasts.success('点击了链接: $url');
          }
          return true;
        },
      ),
    );
  }
}
